import React, { useState, useEffect } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from './ui/card';
import { Button } from './ui/button';
import { Badge } from './ui/badge';
import { Progress } from './ui/progress';
import { FileText, Clock, Trophy, Star } from 'lucide-react';
import { motion, AnimatePresence } from 'motion/react';
import { TestResult } from '../types';

interface ReadingComprehensionTestProps {
  onComplete: (result: TestResult) => void;
}

interface ReadingPassage {
  id: number;
  title: string;
  content: string;
  questions: Question[];
  difficulty: 'easy' | 'medium' | 'hard';
  wordCount: number;
  timeLimit: number;
}

interface Question {
  id: number;
  question: string;
  options: string[];
  correct: number;
  type: 'detail' | 'inference' | 'main_idea' | 'vocabulary' | 'attitude';
}

// 大量阅读材料库
const READING_PASSAGES: ReadingPassage[] = [
  {
    id: 1,
    title: '人工智能的未来发展',
    content: `人工智能技术在过去十年中取得了巨大进步。从语音识别到图像处理，从自动驾驶到医疗诊断，AI正在改变着我们的生活方式。

机器学习算法的不断改进使得计算机能够处理越来越复杂的任务。深度学习网络可以识别语音中的细微差别，计算机视觉技术能够比人眼更准确地诊断某些疾病。

然而，人工智能的发展也带来了挑战。工作岗位的自动化可能导致失业问题，算法偏见可能加剧社会不平等。此外，随着AI系统变得更加智能，我们需要确保它们的决策过程是可解释和可控制的。

专家们认为，未来的AI发展应该注重责任和伦理。我们需要建立相应的法律框架来规范AI的使用，同时加强对AI安全性的研究。只有这样，人工智能才能真正造福人类社会。`,
    questions: [
      {
        id: 1,
        question: '根据文章，人工智能在哪些领域取得了进步？',
        options: ['仅在语音识别', '语音识别、图像处理、自动驾驶和医疗诊断', '只在医疗领域', '主要在娱乐行业'],
        correct: 1,
        type: 'detail'
      },
      {
        id: 2,
        question: '文章提到的AI发展挑战不包括：',
        options: ['工作岗位自动化', '算法偏见', '技术成本过高', '决策过程的可解释性'],
        correct: 2,
        type: 'detail'
      },
      {
        id: 3,
        question: '作者对AI未来发展的态度是：',
        options: ['完全乐观', '谨慎乐观，强调责任和伦理', '悲观担忧', '中性客观'],
        correct: 1,
        type: 'attitude'
      }
    ],
    difficulty: 'medium',
    wordCount: 280,
    timeLimit: 180
  },
  {
    id: 2,
    title: '城市绿化的重要性',
    content: `城市绿化是现代城市规划中不可或缺的组成部分。随着城市化进程的加快，城市人口密度不断增加，绿化空间显得尤为珍贵。

城市绿化带来的好处是多方面的。首先，植物能够吸收二氧化碳，释放氧气，有效改善空气质量。其次，绿色植物可以调节气温，在炎热的夏季为城市降温，形成城市"绿岛效应"。此外，绿化还能减少噪音污染，为居民提供更加宁静的生活环境。

从心理健康角度来看，绿色空间对人们的精神状态有积极影响。研究表明，接触自然环境可以缓解压力，提高工作效率，甚至有助于治疗抑郁症状。城市公园成为人们休闲娱乐、锻炼身体的重要场所。

然而，城市绿化也面临挑战。土地成本高昂，维护费用不菲，加上城市发展对土地的巨大需求，使得绿化空间往往被压缩。因此，城市规划者需要在发展与环保之间找到平衡点。`,
    questions: [
      {
        id: 1,
        question: '城市绿化的主要好处包括：',
        options: ['仅仅美化环境', '改善空气质量、调节气温、减少噪音', '只能提供休闲场所', '主要是经济效益'],
        correct: 1,
        type: 'main_idea'
      },
      {
        id: 2,
        question: '文中的"绿岛效应"指的是：',
        options: ['绿化带来的经济效应', '绿色植物调节气温的作用', '绿化对房价的影响', '绿化的视觉效果'],
        correct: 1,
        type: 'vocabulary'
      },
      {
        id: 3,
        question: '根据文章，城市绿化面临的主要挑战是：',
        options: ['植物种类选择困难', '土地成本高昂和维护费用', '居民不支持', '技术水平不够'],
        correct: 1,
        type: 'detail'
      },
      {
        id: 4,
        question: '从文章可以推断出：',
        options: ['城市绿化完全没有必要', '城市绿化需要在发展与环保间平衡', '绿化只对富裕城市有意义', '绿化问题无法解决'],
        correct: 1,
        type: 'inference'
      }
    ],
    difficulty: 'medium',
    wordCount: 320,
    timeLimit: 200
  },
  {
    id: 3,
    title: '海洋污染与保护',
    content: `海洋覆盖了地球表面的71%，是地球生命系统的重要组成部分。然而，随着工业化和全球化的发展，海洋正面临前所未有的污染威胁。

塑料污染是海洋面临的最严重问题之一。每年有约800万吨塑料垃圾进入海洋，形成巨大的垃圾岛。这些塑料垃圾不仅影响海洋生物的生存环境，还会通过食物链最终影响人类健康。海龟误食塑料袋，海鸟被塑料绳索缠绕，这样的悲剧每天都在发生。

化学污染同样严重。工业废水、农业化肥和杀虫剂等有毒物质通过河流最终流入大海。这些化学物质会导致海水富营养化，引发赤潮现象，造成大量海洋生物死亡。

石油污染虽然不如前两者频繁，但危害极大。石油泄漏不仅会杀死海洋生物，还会破坏海岸生态系统，影响渔业和旅游业。

保护海洋环境需要全球协作。减少塑料使用，发展可降解材料，严格控制工业排放，建立海洋保护区，这些措施都是必要的。只有人类共同努力，才能还海洋一片蔚蓝。`,
    questions: [
      {
        id: 1,
        question: '每年有多少塑料垃圾进入海洋？',
        options: ['约500万吨', '约800万吨', '约1000万吨', '约1200万吨'],
        correct: 1,
        type: 'detail'
      },
      {
        id: 2,
        question: '文中提到的海洋污染类型不包括：',
        options: ['塑料污染', '化学污染', '石油污染', '噪音污染'],
        correct: 3,
        type: 'detail'
      },
      {
        id: 3,
        question: '文中的"赤潮现象"是由什么引起的？',
        options: ['塑料污染', '海水富营养化', '石油泄漏', '气候变暖'],
        correct: 1,
        type: 'vocabulary'
      },
      {
        id: 4,
        question: '作者认为解决海洋污染问题需要：',
        options: ['仅靠政府努力', '全球协作和共同努力', '只需要技术进步', '主要依靠市场调节'],
        correct: 1,
        type: 'main_idea'
      }
    ],
    difficulty: 'hard',
    wordCount: 380,
    timeLimit: 240
  },
  // 继续添加更多阅读材料...
  {
    id: 4,
    title: '传统手工艺的传承',
    content: `在现代化的浪潮中，许多传统手工艺面临着失传的危险。这些承载着深厚文化底蕴的技艺，曾经是人们生活中不可或缺的一部分，如今却逐渐被机器生产所取代。

以陶艺为例，这门古老的技艺有着数千年的历史。从最初的实用器皿到精美的艺术品，陶艺体现了人类的创造力和审美追求。然而，现代工业生产的瓷器不仅成本低廉，而且质量稳定，使得传统手工陶艺的市场空间越来越小。

纺织业也面临着同样的困境。机器纺织品的大量生产使得手工纺织品显得价格昂贵。年轻人更愿意购买便宜的机器制品，而不是花费大量时间和金钱去学习这些传统技艺。

尽管如此，传统手工艺仍有其独特价值。手工制品具有独特的个性和温度，这是机器无法复制的。更重要的是，这些技艺承载着民族文化的精神内核，是文化传承的重要载体。

为了保护传统手工艺，政府和社会各界都在努力。建立非物质文化遗产保护制度，培养传承人，举办展览和培训班，这些措施都有助于传统手工艺的传承和发展。`,
    questions: [
      {
        id: 1,
        question: '传统手工艺面临失传的主要原因是：',
        options: ['技艺太难学习', '被机器生产取代', '没有文化价值', '政府不支持'],
        correct: 1,
        type: 'main_idea'
      },
      {
        id: 2,
        question: '根据文章，手工制品的独特价值在于：',
        options: ['价格便宜', '质量更好', '具有个性和温度', '生产速度快'],
        correct: 2,
        type: 'detail'
      },
      {
        id: 3,
        question: '文章提到的保护措施不包括：',
        options: ['建立保护制度', '培养传承人', '降低生产成本', '举办展览培训'],
        correct: 2,
        type: 'detail'
      }
    ],
    difficulty: 'easy',
    wordCount: 300,
    timeLimit: 160
  },
  {
    id: 5,
    title: '睡眠与健康',
    content: `睡眠是人类生活中不可或缺的生理需求，对身心健康有着深远的影响。然而，在快节奏的现代社会中，睡眠问题已经成为困扰许多人的健康隐患。

科学研究表明，充足的睡眠对大脑功能至关重要。在睡眠过程中，大脑会清理白天积累的代谢废物，巩固记忆，修复神经元损伤。睡眠不足会导致注意力不集中、记忆力下降、判断力受损，长期缺乏睡眠甚至会增加患阿尔茨海默病的风险。

睡眠对身体健康同样重要。在深度睡眠阶段，身体会分泌生长激素，促进组织修复和免疫系统功能。睡眠不足的人更容易患感冒，伤口愈合速度也会变慢。此外，长期睡眠不足还与肥胖、糖尿病、心血管疾病等多种慢性疾病有关。

现代生活方式对睡眠质量造成了很大影响。电子设备发出的蓝光会抑制褪黑激素的分泌，影响人体的生物钟。工作压力、不规律的作息时间、咖啡因摄入过量等因素都会干扰正常的睡眠模式。

改善睡眠质量需要养成良好的睡眠习惯。保持规律的作息时间，睡前避免使用电子设备，创造舒适的睡眠环境，适度运动但避免睡前剧烈活动，这些都有助于提高睡眠质量。如果睡眠问题严重，应该寻求专业医生的帮助。`,
    questions: [
      {
        id: 1,
        question: '睡眠不足对大脑功能的影响包括：',
        options: ['仅影响记忆力', '注意力不集中、记忆力下降、判断力受损', '只会影响情绪', '主要影响视力'],
        correct: 1,
        type: 'detail'
      },
      {
        id: 2,
        question: '深度睡眠阶段身体会分泌什么？',
        options: ['胰岛素', '生长激素', '肾上腺素', '甲状腺素'],
        correct: 1,
        type: 'detail'
      },
      {
        id: 3,
        question: '影响睡眠质量的现代生活因素不包括：',
        options: ['蓝光影响', '工作压力', '饮食营养', '不规律作息'],
        correct: 2,
        type: 'detail'
      },
      {
        id: 4,
        question: '文章的主要观点是：',
        options: ['睡眠问题无法解决', '充足睡眠对健康至关重要', '现代人不需要太多睡眠', '药物是改善睡眠的最好方法'],
        correct: 1,
        type: 'main_idea'
      }
    ],
    difficulty: 'medium',
    wordCount: 420,
    timeLimit: 220
  }
  // 可以继续添加更多阅读材料...
];

// 添加更多简单和困难的阅读材料
const ADDITIONAL_PASSAGES: ReadingPassage[] = [
  {
    id: 6,
    title: '春天的公园',
    content: `春天来了，公园里的景色变得美丽起来。柳树抽出了嫩绿的新芽，在微风中轻柔地摆动。草地上冒出了小草，绿油油的一片。花坛里的花儿也开始绽放，红的、黄的、紫的，五颜六色，非常好看。

小鸟在树枝上唱歌，声音清脆动听。蝴蝶在花丛中飞舞，翅膀轻盈美丽。池塘里的水清澈见底，几条小鱼在水中游来游去。

人们也喜欢来公园散步。老人们在晨练，有的打太极拳，有的跳广场舞。孩子们在草地上奔跑，笑声阵阵。年轻人坐在长椅上聊天，享受着温暖的阳光。

春天的公园真是一个美好的地方，让人心情愉悦。`,
    questions: [
      {
        id: 1,
        question: '春天公园里的花儿有哪些颜色？',
        options: ['只有红色', '红的、黄的、紫的', '只有黄色和紫色', '只有绿色'],
        correct: 1,
        type: 'detail'
      },
      {
        id: 2,
        question: '文中提到的动物有：',
        options: ['小鸟和蝴蝶', '小鸟、蝴蝶和小鱼', '只有小鸟', '只有蝴蝶'],
        correct: 1,
        type: 'detail'
      },
      {
        id: 3,
        question: '这篇文章主要描述了：',
        options: ['春天公园的美丽景色', '公园的历史', '如何建设公园', '公园的管理制度'],
        correct: 0,
        type: 'main_idea'
      }
    ],
    difficulty: 'easy',
    wordCount: 180,
    timeLimit: 120
  },
  {
    id: 7,
    title: '量子计算的革命',
    content: `量子计算代表着计算科学的一次根本性革命。与传统计算机使用0和1的二进制位不同，量子计算机利用量子位（qubit）的叠加态和纠缠特性，能够同时处理指数级的信息。

量子叠加是量子计算的核心原理之一。在经典物理学中，一个位只能处于0或1状态，但在量子世界中，一个量子位可以同时处于0和1的叠加态。这意味着n个量子位可以同时存储2^n种状态，而传统的n个位只能存储一种状态。

量子纠缠是另一个关键特性。当两个或多个量子位发生纠缠时，无论它们相距多远，对其中一个量子位的测量都会立即影响其他纠缠的量子位。爱因斯坦称此现象为"鬼魅般的远距离作用"。

量子算法的优势在某些特定问题上极为明显。例如，Shor算法可以在多项式时间内分解大整数，这对现有的RSA加密体系构成了威胁。Grover算法可以在未排序数据库中以平方根时间复杂度进行搜索，相比经典算法有显著提升。

然而，量子计算仍面临巨大技术挑战。量子相干性极易受到环境干扰而发生退相干，量子错误率远高于经典计算机。目前的量子计算机仍处于噪声中等规模量子（NISQ）时代，距离实现容错量子计算还有很长的路要走。

尽管如此，量子计算在密码学、药物发现、材料科学、金融建模等领域展现出巨大潜力。随着量子纠错码的发展和硬件技术的进步，量子计算有望在未来几十年内实现实用化，彻底改变我们处理复杂问题的方式。`,
    questions: [
      {
        id: 1,
        question: '量子计算机与传统计算机的根本区别在于：',
        options: ['运算速度更快', '使用量子位的叠加态和纠缠特性', '体积更小', '功耗更低'],
        correct: 1,
        type: 'main_idea'
      },
      {
        id: 2,
        question: 'n个量子位可以同时存储多少种状态？',
        options: ['n种', '2n种', '2^n种', 'n^2种'],
        correct: 2,
        type: 'detail'
      },
      {
        id: 3,
        question: '爱因斯坦把什么现象称为"鬼魅般的远距离作用"？',
        options: ['量子叠加', '量子纠缠', '量子计算', '量子退相干'],
        correct: 1,
        type: 'vocabulary'
      },
      {
        id: 4,
        question: 'NISQ时代指的是：',
        options: ['量子计算的黄金时代', '噪声中等规模量子时代', '量子计算的初级阶段', '量子计算的成熟期'],
        correct: 1,
        type: 'vocabulary'
      },
      {
        id: 5,
        question: '从文章可以推断出：',
        options: ['量子计算已经完全成熟', '量子计算仍面临技术挑战但前景广阔', '量子计算没有实用价值', '量子计算将完全取代传统计算'],
        correct: 1,
        type: 'inference'
      }
    ],
    difficulty: 'hard',
    wordCount: 520,
    timeLimit: 300
  }
];

// 合并所有阅读材料
const ALL_PASSAGES = [...READING_PASSAGES, ...ADDITIONAL_PASSAGES];

export function ReadingComprehensionTest({ onComplete }: ReadingComprehensionTestProps) {
  const [stage, setStage] = useState<'instructions' | 'reading' | 'questions' | 'results'>('instructions');
  const [currentPassage, setCurrentPassage] = useState<ReadingPassage | null>(null);
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [responses, setResponses] = useState<number[]>([]);
  const [timeLeft, setTimeLeft] = useState(0);
  const [startTime, setStartTime] = useState<number>(0);
  const [score, setScore] = useState(0);
  const [readingStartTime, setReadingStartTime] = useState<number>(0);

  const selectRandomPassage = (): ReadingPassage => {
    const difficulties = ['easy', 'medium', 'hard'];
    const selectedDifficulty = difficulties[Math.floor(Math.random() * difficulties.length)];
    const passagesOfDifficulty = ALL_PASSAGES.filter(p => p.difficulty === selectedDifficulty);
    return passagesOfDifficulty[Math.floor(Math.random() * passagesOfDifficulty.length)];
  };

  useEffect(() => {
    let interval: NodeJS.Timeout;
    if ((stage === 'reading' || stage === 'questions') && timeLeft > 0) {
      interval = setInterval(() => {
        setTimeLeft(prev => {
          if (prev <= 1) {
            setStage('results');
            return 0;
          }
          return prev - 1;
        });
      }, 1000);
    }
    return () => clearInterval(interval);
  }, [stage, timeLeft]);

  const handleStartTest = () => {
    const passage = selectRandomPassage();
    setCurrentPassage(passage);
    setStage('reading');
    setStartTime(Date.now());
    setReadingStartTime(Date.now());
    setTimeLeft(passage.timeLimit);
  };

  const handleStartQuestions = () => {
    setStage('questions');
    setCurrentQuestion(0);
  };

  const handleAnswer = (answerIndex: number) => {
    const correct = answerIndex === currentPassage!.questions[currentQuestion].correct;
    
    setResponses(prev => [...prev, answerIndex]);
    
    if (correct) {
      setScore(prev => prev + 1);
    }

    if (currentQuestion < currentPassage!.questions.length - 1) {
      setCurrentQuestion(prev => prev + 1);
    } else {
      setStage('results');
    }
  };

  const handleComplete = () => {
    if (!currentPassage) return;

    const totalQuestions = currentPassage.questions.length;
    const correctAnswers = score;
    const accuracy = Math.round((correctAnswers / totalQuestions) * 100);
    const timeUsed = Math.round((Date.now() - startTime) / 1000);
    const readingSpeed = Math.round((currentPassage.wordCount / (Date.now() - readingStartTime)) * 60000); // 每分钟字数

    // 按题目类型统计
    const typeStats: { [key: string]: { correct: number; total: number } } = {};
    
    currentPassage.questions.forEach((question, index) => {
      const type = question.type;
      if (!typeStats[type]) {
        typeStats[type] = { correct: 0, total: 0 };
      }
      typeStats[type].total++;
      if (responses[index] === question.correct) {
        typeStats[type].correct++;
      }
    });

    const result: TestResult = {
      id: Date.now().toString(),
      testType: 'reading-comprehension',
      score: accuracy,
      completedAt: new Date(),
      duration: timeUsed,
      details: {
        passageTitle: currentPassage.title,
        passageDifficulty: currentPassage.difficulty,
        wordCount: currentPassage.wordCount,
        readingSpeed,
        totalQuestions,
        correctAnswers,
        accuracy,
        typeBreakdown: Object.entries(typeStats).map(([type, stats]) => ({
          type: type === 'detail' ? '细节理解' :
                type === 'inference' ? '推理判断' :
                type === 'main_idea' ? '主旨大意' :
                type === 'vocabulary' ? '词汇理解' : '态度观点',
          accuracy: stats.total > 0 ? Math.round((stats.correct / stats.total) * 100) : 0,
          correct: stats.correct,
          total: stats.total
        })),
        passageUsed: currentPassage.id
      }
    };

    onComplete(result);
  };

  if (stage === 'instructions') {
    return (
      <motion.div
        initial={{ opacity: 0, y: 20 }}
        animate={{ opacity: 1, y: 0 }}
        className="max-w-2xl mx-auto"
      >
        <Card className="bg-white/90 backdrop-blur-sm border-green-200 shadow-lg">
          <CardHeader className="text-center pb-8">
            <div className="w-16 h-16 bg-gradient-to-br from-green-600 to-emerald-500 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg">
              <FileText className="w-8 h-8 text-white" />
            </div>
            <CardTitle className="text-2xl text-slate-800">阅读理解测试</CardTitle>
            <p className="text-slate-600 mt-2">测试您的阅读理解和文本分析能力</p>
          </CardHeader>
          
          <CardContent className="space-y-6">
            <div className="bg-gradient-to-r from-green-50 to-emerald-50 rounded-xl p-6 border border-green-100">
              <h3 className="font-semibold text-green-900 mb-4 flex items-center gap-2">
                <Star className="w-5 h-5" />
                测试说明
              </h3>
              <div className="space-y-3 text-slate-700">
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">1</span>
                  <p>系统将随机选择一篇阅读材料</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">2</span>
                  <p>先阅读文章，理解主要内容和细节</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">3</span>
                  <p>然后回答相关问题，包括细节理解、推理判断等</p>
                </div>
                <div className="flex gap-3">
                  <span className="w-6 h-6 bg-green-600 text-white rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0 mt-0.5">4</span>
                  <p>注意时间限制，合理安排阅读和答题时间</p>
                </div>
              </div>
            </div>

            <div className="grid md:grid-cols-2 gap-4">
              <div className="bg-gradient-to-br from-blue-50 to-blue-100 rounded-xl p-4 border border-blue-200">
                <h4 className="font-semibold text-blue-800 mb-2">细节理解</h4>
                <p className="text-sm text-blue-700">准确找出文中明确信息</p>
              </div>
              <div className="bg-gradient-to-br from-purple-50 to-purple-100 rounded-xl p-4 border border-purple-200">
                <h4 className="font-semibold text-purple-800 mb-2">推理判断</h4>
                <p className="text-sm text-purple-700">基于文章内容进行逻辑推理</p>
              </div>
            </div>

            <div className="grid md:grid-cols-3 gap-4">
              <div className="text-center p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-xl border border-green-200">
                <div className="text-2xl font-bold text-green-600 mb-1">7+</div>
                <div className="text-sm text-green-700">文章库</div>
              </div>
              <div className="text-center p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-xl border border-emerald-200">
                <div className="text-2xl font-bold text-emerald-600 mb-1">随机</div>
                <div className="text-sm text-emerald-700">选择文章</div>
              </div>
              <div className="text-center p-4 bg-gradient-to-br from-green-50 to-emerald-50 rounded-xl border border-green-200">
                <div className="text-2xl font-bold text-slate-600 mb-1">限时</div>
                <div className="text-sm text-slate-700">阅读答题</div>
              </div>
            </div>

            <Button 
              onClick={handleStartTest}
              className="w-full bg-gradient-to-r from-green-600 to-emerald-500 hover:from-green-700 hover:to-emerald-600 text-white py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
              size="lg"
            >
              开始测试
            </Button>
          </CardContent>
        </Card>
      </motion.div>
    );
  }

  if (stage === 'reading' && currentPassage) {
    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        className="max-w-4xl mx-auto space-y-6"
      >
        {/* 顶部状态栏 */}
        <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
          <div className="flex items-center gap-4">
            <Badge variant="outline" className="bg-green-100 text-green-700 border-green-300">
              阅读阶段
            </Badge>
            <Badge variant="outline" className={`${
              currentPassage.difficulty === 'easy' ? 'bg-blue-100 text-blue-700 border-blue-300' :
              currentPassage.difficulty === 'medium' ? 'bg-yellow-100 text-yellow-700 border-yellow-300' :
              'bg-red-100 text-red-700 border-red-300'
            }`}>
              {currentPassage.difficulty === 'easy' ? '简单' :
               currentPassage.difficulty === 'medium' ? '中等' : '困难'}
            </Badge>
            <div className="text-slate-600">
              字数：{currentPassage.wordCount}
            </div>
          </div>
          
          <div className="flex items-center gap-2">
            <Clock className="w-4 h-4 text-slate-500" />
            <span className={`font-mono text-lg font-bold ${timeLeft <= 30 ? 'text-red-500' : 'text-slate-700'}`}>
              {Math.floor(timeLeft / 60)}:{(timeLeft % 60).toString().padStart(2, '0')}
            </span>
          </div>
        </div>

        {/* 阅读区域 */}
        <Card className="bg-white/90 backdrop-blur-sm border-green-200 shadow-lg">
          <CardHeader>
            <CardTitle className="text-2xl text-slate-800">{currentPassage.title}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="text-slate-700 leading-relaxed whitespace-pre-line text-base">
              {currentPassage.content}
            </div>
            
            <div className="pt-4 border-t">
              <Button 
                onClick={handleStartQuestions}
                className="bg-gradient-to-r from-green-600 to-emerald-500 hover:from-green-700 hover:to-emerald-600 text-white px-8 py-3 font-semibold"
              >
                开始答题
              </Button>
            </div>
          </CardContent>
        </Card>
      </motion.div>
    );
  }

  if (stage === 'questions' && currentPassage) {
    const question = currentPassage.questions[currentQuestion];
    const progress = (currentQuestion / currentPassage.questions.length) * 100;

    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        className="max-w-4xl mx-auto space-y-6"
      >
        {/* 顶部状态栏 */}
        <div className="flex flex-col sm:flex-row gap-4 items-center justify-between">
          <div className="flex items-center gap-4">
            <Badge variant="outline" className="bg-green-100 text-green-700 border-green-300">
              问题 {currentQuestion + 1} / {currentPassage.questions.length}
            </Badge>
            <Badge variant="outline" className={`${
              question.type === 'detail' ? 'bg-blue-100 text-blue-700 border-blue-300' :
              question.type === 'inference' ? 'bg-purple-100 text-purple-700 border-purple-300' :
              question.type === 'main_idea' ? 'bg-orange-100 text-orange-700 border-orange-300' :
              question.type === 'vocabulary' ? 'bg-pink-100 text-pink-700 border-pink-300' :
              'bg-indigo-100 text-indigo-700 border-indigo-300'
            }`}>
              {question.type === 'detail' ? '细节理解' :
               question.type === 'inference' ? '推理判断' :
               question.type === 'main_idea' ? '主旨大意' :
               question.type === 'vocabulary' ? '词汇理解' : '态度观点'}
            </Badge>
            <div className="flex items-center gap-2 text-slate-600">
              <Trophy className="w-4 h-4" />
              <span className="font-semibold">{score}</span>
            </div>
          </div>
          
          <div className="flex items-center gap-2">
            <Clock className="w-4 h-4 text-slate-500" />
            <span className={`font-mono text-lg font-bold ${timeLeft <= 30 ? 'text-red-500' : 'text-slate-700'}`}>
              {Math.floor(timeLeft / 60)}:{(timeLeft % 60).toString().padStart(2, '0')}
            </span>
          </div>
        </div>

        <Progress value={progress} className="h-2" />

        {/* 问题区域 */}
        <Card className="bg-white/90 backdrop-blur-sm border-green-200 shadow-lg">
          <CardHeader>
            <CardTitle className="text-xl text-slate-800">{question.question}</CardTitle>
          </CardHeader>
          <CardContent className="space-y-4">
            {question.options.map((option, index) => (
              <motion.div
                key={index}
                whileHover={{ scale: 1.01 }}
                whileTap={{ scale: 0.99 }}
              >
                <Button
                  variant="outline"
                  onClick={() => handleAnswer(index)}
                  className="w-full h-auto min-h-[3rem] text-left justify-start p-4 hover:bg-green-50 hover:border-green-300"
                >
                  <div className="flex items-center gap-3">
                    <span className="w-8 h-8 bg-green-100 text-green-700 rounded-full flex items-center justify-center text-sm font-semibold flex-shrink-0">
                      {String.fromCharCode(65 + index)}
                    </span>
                    <span className="text-slate-800">{option}</span>
                  </div>
                </Button>
              </motion.div>
            ))}
          </CardContent>
        </Card>

        {/* 文章引用区域 */}
        <Card className="bg-slate-50 border-slate-200">
          <CardHeader>
            <CardTitle className="text-lg text-slate-700">参考文章：{currentPassage.title}</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="text-slate-600 text-sm leading-relaxed whitespace-pre-line max-h-40 overflow-y-auto">
              {currentPassage.content.substring(0, 200)}...
            </div>
          </CardContent>
        </Card>
      </motion.div>
    );
  }

  if (stage === 'results' && currentPassage) {
    const totalQuestions = currentPassage.questions.length;
    const correctAnswers = score;
    const accuracy = Math.round((correctAnswers / totalQuestions) * 100);

    return (
      <motion.div
        initial={{ opacity: 0, scale: 0.95 }}
        animate={{ opacity: 1, scale: 1 }}
        className="max-w-2xl mx-auto"
      >
        <Card className="bg-white/90 backdrop-blur-sm border-green-200 shadow-xl">
          <CardHeader className="text-center pb-6">
            <motion.div
              initial={{ scale: 0 }}
              animate={{ scale: 1 }}
              transition={{ delay: 0.2, type: "spring", stiffness: 200 }}
              className="w-20 h-20 bg-gradient-to-br from-green-600 to-emerald-500 rounded-2xl flex items-center justify-center mx-auto mb-4 shadow-lg"
            >
              <Trophy className="w-10 h-10 text-white" />
            </motion.div>
            
            <CardTitle className="text-3xl text-slate-800 mb-2">测试完成！</CardTitle>
            <div className="text-6xl font-bold bg-gradient-to-r from-green-600 to-emerald-500 bg-clip-text text-transparent">
              {accuracy}
            </div>
            <p className="text-slate-600">阅读理解准确率</p>
          </CardHeader>
          
          <CardContent className="space-y-6">
            <div className="grid grid-cols-2 gap-4">
              <div className="text-center p-4 bg-gradient-to-br from-green-50 to-green-100 rounded-xl border border-green-200">
                <div className="text-2xl font-bold text-green-600 mb-1">{correctAnswers}/{totalQuestions}</div>
                <div className="text-sm text-green-700">正确题数</div>
              </div>
              <div className="text-center p-4 bg-gradient-to-br from-emerald-50 to-emerald-100 rounded-xl border border-emerald-200">
                <div className="text-2xl font-bold text-emerald-600 mb-1">{currentPassage.wordCount}</div>
                <div className="text-sm text-emerald-700">阅读字数</div>
              </div>
            </div>

            <div className="space-y-3">
              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                <span className="text-slate-600">文章标题</span>
                <span className="font-semibold text-slate-800">{currentPassage.title}</span>
              </div>
              <div className="flex justify-between items-center p-3 bg-slate-50 rounded-lg">
                <span className="text-slate-600">难度等级</span>
                <span className="font-semibold text-slate-800">
                  {currentPassage.difficulty === 'easy' ? '简单' :
                   currentPassage.difficulty === 'medium' ? '中等' : '困难'}
                </span>
              </div>
            </div>

            <Button 
              onClick={handleComplete}
              className="w-full bg-gradient-to-r from-green-600 to-emerald-500 hover:from-green-700 hover:to-emerald-600 text-white py-3 text-lg font-semibold shadow-lg hover:shadow-xl transition-all duration-200"
              size="lg"
            >
              查看详细结果
            </Button>
          </CardContent>
        </Card>
      </motion.div>
    );
  }

  return null;
}